<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: Arial, sans-serif;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: linear-gradient(90deg, #c7c5f4, #776bcc);
            }

            .container {
                width: 360px;
                height: 540px;
                position: relative;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            }

            .form-container {
                position: absolute;
                width: 100%;
                height: 100%;
                padding: 40px;
                transition: opacity 0.5s ease-in-out;
                display: flex;
                flex-direction: column;
                justify-content: center;
                z-index: 2;
            }

            .form-container.hidden {
                opacity: 0;
                pointer-events: none;
            }
            .screen__background {
                height: 100%;
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
            }

            .screen__background__shape {
                transform: rotate(45deg);
                position: absolute;
            }

            .screen__background__shape1 {
                height: 520px;
                width: 520px;
                background: #fff;
                top: -50px;
                right: 120px;
                border-radius: 0 72px 0 0;
            }

            .screen__background__shape2 {
                height: 220px;
                width: 220px;
                background: #6c63ac;
                top: -172px;
                right: 0;
                border-radius: 32px;
            }

            .screen__background__shape3 {
                height: 540px;
                width: 190px;
                background: linear-gradient(270deg, #5d54a4, #6a679e);
                top: -24px;
                right: 0;
                border-radius: 32px;
            }

            .screen__background__shape4 {
                height: 400px;
                width: 200px;
                background: #7e7bb9;
                top: 420px;
                right: 50px;
                border-radius: 60px;
            }

            .input-group {
                margin-bottom: 20px;
                position: relative;
            }

            .input-group input {
                width: 100%;
                padding: 10px 0;
                border: none;
                border-bottom: 2px solid #ddd;
                background: transparent;
                outline: none;
                font-size: 16px;
                color: #666;
            }

            .input-group input::placeholder {
                color: #999;
            }

            .btn {
                background: #786ccc;
                color: white;
                padding: 12px 24px;
                border: none;
                border-radius: 25px;
                cursor: pointer;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                transition: background 0.3s;
            }

            .btn:hover {
                background: #7c3aed;
            }

            .btn::after {
                content: "→";
                margin-left: 10px;
            }

            .links {
                text-align: center;
                margin-top: 20px;
            }

            .links a {
                color: #8b5cf6;
                text-decoration: none;
                font-size: 14px;
                margin: 0 10px;
            }

            .links a:hover {
                text-decoration: underline;
            }
        </style>

        <script
            type="module"
            src="./login.js"
        ></script>
    </head>
    <body>
        <div class="container">
            <div class="screen__background">
                <span
                    class="screen__background__shape screen__background__shape4"
                ></span>
                <span
                    class="screen__background__shape screen__background__shape3"
                ></span>
                <span
                    class="screen__background__shape screen__background__shape2"
                ></span>
                <span
                    class="screen__background__shape screen__background__shape1"
                ></span>
            </div>

            <form
                class="form-container"
                id="loginForm"
            >
                <div class="input-group">
                    <input
                        type="text"
                        placeholder="用户"
                        name="user_account"
                        required
                    />
                </div>
                <div class="input-group">
                    <input
                        type="password"
                        placeholder="密码"
                        name="user_password"
                        required
                    />
                </div>
                <button
                    class="btn"
                    type="submit"
                >
                    登陆
                </button>
                <div class="links">
                    <a
                        href="#"
                        onclick="showForm('forgotForm')"
                        style="color: #5e56a4"
                        >忘记密码?</a
                    >
                    <a
                        href="#"
                        onclick="showForm('registerForm')"
                        style="color: #fff"
                        >注册</a
                    >
                </div>
            </form>

            <!-- Register Form -->
            <form
                class="form-container hidden"
                id="registerForm"
            >
                <div class="input-group">
                    <input
                        type="text"
                        placeholder="用户名"
                        name="user_account"
                        required
                    />
                </div>
                <div class="input-group">
                    <input
                        type="email"
                        placeholder="邮箱"
                        name="user_email"
                    />
                </div>
                <div class="input-group">
                    <input
                        type="password"
                        placeholder="密码"
                        name="user_password"
                        required
                    />
                </div>
                <button
                    class="btn"
                    type="submit"
                >
                    注册
                </button>
                <div class="links">
                    <a
                        href="#"
                        onclick="showForm('loginForm')"
                        style="color: #fff"
                        >登陆</a
                    >
                </div>
            </form>

            <!-- Forgot Password Form -->
            <div
                class="form-container hidden"
                id="forgotForm"
            >
                <div class="input-group">
                    <input
                        type="email"
                        placeholder="邮箱"
                    />
                </div>
                <button class="btn">重置密码</button>
                <div class="links">
                    <a
                        href="#"
                        onclick="showForm('loginForm')"
                        >返回登陆</a
                    >
                </div>
            </div>
        </div>

        <script>
            function showForm(formId) {
                document.querySelectorAll(".form-container").forEach((form) => {
                    form.classList.add("hidden");
                });
                document.getElementById(formId).classList.remove("hidden");
            }
        </script>
    </body>
</html>
